import LeftPanel from '../../leftPanel/LeftPanel'
import { getImage } from '@/utils/getImg'
import './left.less'
import { useState } from 'react'

const Left = () => {
  const [uavDescData, setUavDescData] = useState({
    uavTotal: 5,
    onlinNum: 5,
    overhaulNum: 0,
    uavPeoPleNum: 2,
    todayPeople: 1,
  })

  const [allUavList, setAllUavList] = useState([
    {
      name: '经纬M300RTK',
      number: 5,
      text: '垂直起降多旋翼无人机:载荷H20T热红外相机、102SV2五日镜头倾斜摄影相机，三通道1080p图传，15km图传距离，最大飞行时间55min，实用升限7000m，最大抗风速15m/s',
      label: ['三维建模', '林业巡查', '环保监测', '农业应用', '水利监测'],
    },
  ])
  return (
    <LeftPanel>
      <div className="left-wrj">
        <div className="global-header-title">
          <span>无人机概况</span>
        </div>

        <div className="uav-desc">
          <img src={getImage('/wrj/wurenji_img.png')} alt="" />
          <div className="text-div">
            <div className="size">
              {uavDescData.uavTotal} <span>架</span>
            </div>
            <div className="name">无人机总数</div>
          </div>
          <div className="text-div">
            <div className="size" style={{ color: '#3EFFC5' }}>
              {uavDescData.onlinNum} <span>架</span>
            </div>
            <div className="name">运行数量</div>
          </div>
          <div className="text-div">
            <div className="size" style={{ color: '#FFB055' }}>
              {uavDescData.overhaulNum} <span>架</span>
            </div>
            <div className="name">检修数量</div>
          </div>
        </div>

        <div className="uav-desc">
          <img src={getImage('/wrj/feishou_img.png')} alt="" />
          <div className="text-div">
            <div className="size">
              {uavDescData.uavPeoPleNum} <span>人</span>
            </div>
            <div className="name">飞手总数</div>
          </div>
          <div className="text-div">
            <div className="size" style={{ color: '#3EFFC5' }}>
              {uavDescData.todayPeople} <span>人</span>
            </div>
            <div className="name">今日航飞人员数量</div>
          </div>
        </div>

        <div className="uav-satus-list">
          {allUavList.map((option, i) => (
            <div className="uav-card" key={i}>
              <img className="wrj" src={getImage('/wrj/wurenji.png')} alt="" />
              <div className="detail">
                <p className="title">{option.name}</p>
                <div style={{ display: 'flex', alignContent: 'center' }}>
                  <div className="img-text">
                    <img src={getImage('/wrj/icon_img02.png')} alt="" />
                    <div className="right-text">
                      {option.number}
                      <span>架</span>
                    </div>
                  </div>
                </div>
                <div className="content-text">{option.text}</div>
                <div className="type-label">
                  {option.label.map((label, index) => (
                    <div className="label" key={index}>
                      {label}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </LeftPanel>
  )
}
export default Left
